<body>
  <div class="container">
    <button class="btn stop">stop</button>
    <div class="animation"></div>
  </div>
</body>




<script>
  // document.querySelector('.btn').addEventListener('click', function () {
  //   let btn = document.querySelector('.btn')
  //   let elem = document.querySelector('.animation')
  //   let state = elem.style['animationPlayState']

  //   if (state === "paused") {
  //     elem.style['animationPlayState'] = "running"
  //     btn.innerHTML = "stop"
  //   } else {
  //     elem.style['animationPlayState'] = "paused"
  //     btn.innerHTML = "play"
  //   }
  // })
</script>

<style>
  .container {
    position: relative;
    top: 50%;
    left: 50%;
  }

  .btn {
    position: absolute;
    top: -200px
  }

  .animation {
    animation: move 2s linear infinite alternate;
    width: 100px;
    height: 100px;
    background: pink;
  }

  @keyframes move {
    0% {
      transform: translate(-100px, 0);
    }

    100% {
      transform: translate(100px, 0);
    }
  }


  /* 实现方法1 */
  /* p~ul的意思为，选择，同一个父元素中，位于 p 元素之后的所有 ul 元素：*/
  /* 意思是，选择stop在hover状态下，后面所以后的兄弟animation */
  .stop:hover~.animation {
    animation-play-state: paused;
  }
</style>